<script setup lang="ts">
import { ref, reactive } from "vue";
import { Medal, Headset } from "@element-plus/icons-vue";

const ICONSIZE = 20;
const router = useRouter();
const route = useRoute();

const menuConfig = [
  {
    menuTitle: "在线音乐",
    menuItme: [
      {
        label: "推荐",
        path: "/index",
      },
      {
        label: "排行榜",
        path: "/rank",
      },
      {
        label: "视频",
        path: "/ye",
      },
      {
        label: "电台",
        path: "/yr",
      },
    ],
  },
  {
    menuTitle: "我的音乐",
    menuItme: [
      {
        label: "我喜欢",
        path: "/a",
      },
      {
        label: "本地歌曲",
        path: "/yd",
      },
      {
        label: "下载歌曲",
        path: "/ye",
      },
      {
        label: "最近播放",
        path: "/yr",
      },
    ],
  },
];
</script>

<template>
  <div class="home-aside">
    <div class="menu" v-for="(item, index) in menuConfig" :key="index">
      <div class="menu-title">{{ item.menuTitle }}</div>

      <div
        @click="router.push(menuItem.path)"
        :class="
          route.path.includes(menuItem.path) ? 'menu-item active' : 'menu-item'
        "
        v-for="(menuItem, index) in item.menuItme"
        :key="index"
      >
        <span>{{ menuItem.label }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-aside {
  width: 100%;
  padding: 10px 20px 20px 20px;

  .menu {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    font-size: var(--el-font-size-base);

    .menu-title {
      color: var(--el-text-color-regular);
      cursor: default;
      margin: 20px 0px 10px 0px;
    }

    .menu-item {
      width: 100%;
      padding: 5px;
      height: 35px;
      border-radius: 8px;
      margin: 7px 0px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -moz-user-select: none;
      -o-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color: var(--el-text-color-primary);

      span {
        padding: 0px 10px;
      }

      &:hover a {
        color: var(--el-color-white);
      }

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-primary);
        transition: all 0.3s ease;
      }
    }

    .active {
      color: var(--el-color-white);
      background-color: var(--el-color-primary);
    }
  }
}
</style>
